<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/11/7
  Time: 16:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/mb/jsp/common.jsp" %>
<%@ page import="com.wsu.search.tools.Tools" %>

<%
   //取得url带过来的参数
    String vrgoodsidVal = Tools.RmNull(request.getParameter("vrgoodsid"));
    String topTittle = java.net.URLDecoder.decode(Tools.RmNull(request.getParameter("topTittle")),"utf-8");
     String priceVal = Tools.RmNull(request.getParameter("price"));
      String usergoodsnumVal = Tools.RmNull(request.getParameter("usergoodsnum"));
      String daysVal = Tools.RmNull(request.getParameter("days"));/*锁定天数，当前接口无此字段*/
%>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>寄售列表</title>

</head>
<body ontouchstart="">
<div class="detailTop pf w100 of">
    <div class="w100 of tc cf f18">
        <span class="pa" style="left: 2px;" onclick="javascript:history.back();"><img src="mb/images/top_back_white.png" style="margin-top: 4px;height: 40px;width: 40px;"></span>
		 <%=topTittle %>
    </div>
</div>
<div class="withdrawBack mgt45 pdt10 pdb10 w100" style="height:auto">
  	<section class="w95 jz flexBox mgt10 mgb10 cf">
       <div class="f14">
       		<div class="df">
       			<p>总瓶数：<%=usergoodsnumVal %></p>
       			<p class="f11-340">(锁定15天后可以出售)</p>
       		</div>
       		<p class="mgt10 lh2">[商品酒]参考价(元/瓶):<%=priceVal %></p>
       </div>
       <div class="f14" style="width:26%;">
       		<a href="mb/jsp/salePost.jsp?vrgoodsid=<%=vrgoodsidVal%>" class="saleBtn w100 db tc">发布寄售</a>
       		<a  href="mb/jsp/saleTrend.jsp?vrgoodsid=<%=vrgoodsidVal%>" class="saleBtn w100 db tc mgt10">寄售趋势</a>
       		<a class="saleBtn w100 db tc mgt10">申请发货</a>
       </div>
    </section>
</div>
	<section id="saleTab" class="saleTab flexBox bcf f15">
		<div class="flexCenter">
			<span class="current" id="0">寄售</span>
		</div>
		<div class="flexCenter">
			<span  id="1">采购</span>
		</div>
	</section>
	<section class="w100 bcf"> 
		<div class="w92 jz flexBox of">
			<div class="pr mgt10 mgb10" style="flex-grow: 2;">
			<input type="search" name="keyword" value="" id="teamSearch" placeholder="输入用户昵称关键词查找" class="f14 br2 db w100 teamSearch">
				<img src="mb/images/teamSearch.png" class="pa" style="height:16px;top:11px;left:10px;">
			</div>
			<input type="submit" value="搜索" name="" class="btnBlue tc db mgl10 cf br2 f15" onclick="search();" style="line-height:36px;width:19%">
		</div>
	</section>
<div id="listContainer" class="container bcf mgt10 w100">
  	<div id="resText"></div><!--resText-->
</div>

<div id="loading" class="w100">
     <img src="mb/images/loading.gif" alt="正在加载" class="db jz hauto" style="width: 15px;">
     <div class="w100 tc f10 c9">正在加载</div>
 </div>
  <div id="loadingComplete" class="w100" style="display:none;">
     <div class="w100 tc f12 c9">已加载完所有数据</div>
 </div>
 
<script>
    var htmlStr="";
    var typeVal= 0;/* 0出售 1购买 */
    var keywordVal = "";
    var curpageVal = 1;
    var total = "";
    var imgLable ="";

$(document).ready(function(){
	
		getData();
		
		$(window).scroll(function () {
	        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
		           if (curpageVal < total) {
		               curpageVal++;
		                $("#loading").slideDown();
		               getData();
		               $("#loading").slideUp();
	              }
	              else {
		               	$("#loadingComplete").slideDown();
		               	var close = function (){
		               	  $("#loadingComplete").slideUp()
		               	};
		   				setTimeout(close,3000);
		   				clearTimeout(close); 
		   				return false;
	              } 
	              
	        }
	 
	    });
	    
		tabFunc($("#saleTab span"),"current");
		
		  //按回车或者键盘搜索按钮进行搜索
        $("#teamSearch").on('keypress',function(e) {  
                var keycode = e.keyCode;  
                if(keycode=='13') {  
                    e.preventDefault();    
                    //请求搜索接口  
                    search();
                    
                }  
         });  
	});


//加载新数据
     function getData() {
    	console.log("curpage: "+curpageVal);
    	typeVal = $("#saleTab span.current").attr('id');
    	
		
        $.ajax({
            url: "PlugServlet",
            data: JSON.stringify({m: 3020,vrgoodsid:<%=vrgoodsidVal%>,curpage: curpageVal,type:typeVal,keyword:keywordVal}),
            type: 'post',
            dataType: 'json',
            contentType: "application/json;charset=utf-8",
            beforeSend: function () {
                showProgressDg();
            },
            success: function (data) {
            	console.log(data);
                if (data.state == 1) {
                
					if(data.list==""||data.list==null){
					 	showToast("暂无数据..");
	                 	return false;
	                 }
	                 
	                 if(typeVal == 0){
						imgLable ='<img src="mb/images/icon_jishou_sale.png" class="pa" style="height:18px;width:18px;z-index:2;top: 0;left: 0;">';
					}else if(typeVal == 1){
						imgLable ='<img src="mb/images/icon_jishou_buy.png" class="pa" style="height:18px;width:18px;z-index:2;top: 0;left: 0;">';
					}
					
                  		 getItemHtml(data.list);
                   		 total = data.total;
        
                } else {
                    // 其他错误弹出提示
                    showToast(data.info);
                }
            },
            error: function (data) {
                showToast(data.info);
            },
            complete: function () {
                closeProgressDg();
            }
        });
        	
       return total;
    }
    
   function getItemHtml(list)
    {
    	$.each(list, function(index, obj) 
    	{
    		var state= parseInt(obj.state);// 状态 0 未上架：1: 寄售中 2: 已成交 3:过期自动撒回
    		
    		var len = (obj.nowdays/obj.updays*100)+"%";
    		
    		var btnBlock = "";
    		var barBlock = "";//滚动条
    		switch(state)
			{
				case 0:
				  btnBlock = '<span class="cf tc f15 db mgt10" style="width:82px;line-height:32px;background:#C9C9C9">未上架</span>';
				  barBlock = '<p class="f13 c3 lh2 br4">距离上架天数：'+(obj.updays - obj.nowdays)+'天</p>'
							+'<div class="progressSale w95 br4"><a class="bar_span db" style="width:'+len+'"></a></div>';
				  break;
				case 1:
				 	if(typeVal == 0){
						btnBlock = '<a href="javascript:buy('+obj.sellid+')" class="btnOrange cf tc f15 db mgt10" style="width:82px;line-height:32px;">购买</a>';
					}else if(typeVal == 1){
						btnBlock = '<a href="javascript:sale('+obj.sellid+')" class="btnOrange cf tc f15 db mgt10" style="width:82px;line-height:32px;">出售</a>';
					}
				
				  break;
				case 3:
				btnBlock ='<span class="orange2 tc f15 db mgt10" style="width:82px;line-height:32px;">已成交</span>'
				  break;
				case 3:
				btnBlock ='<span class="c9 tc f15 db mgt10" style="width:82px;line-height:32px;">过期自动撒回</span>'
				  break;
			
			}
			 console.log("clear"+htmlStr);
          	htmlStr +='<section class="b-b pdt10 pdb10">'
					  		+'<div class="flexBox w95 jz f14">'
					  			+'<div style="flex-grow: 2;">'
					  				+'<div class="df">'
						  				+'<div class="circle pr" style="height:54px;width:54px;">'
						  					+imgLable
							  				+'<div class="circle of" style="height:54px;width:54px;">'
							  					+'<img src="'+getBaseImgUrl(obj.avatar)+'" class="db w100 h100">'
							  				+'</div>'
						  				+'</div>'
								  		+'<div class="mgl3">'
								  			+'<p class="c3">'+obj.username+'</p>'
								  			+'<p class="c9 mgt10">'+dataToString(obj.ctime, "yyyy-MM-dd HH:mm:ss")+'</p>'
								  		+'</div>'
								  	 +'</div>'
								  	 + barBlock
							  	+'</div>'
						  		+'<div>'
						  			+'<p class="c3">数量：'+obj.num+'</p>'
						  			+'<p class="orange mgt10">单价：'+obj.price+'</p>'
						  			+ btnBlock
						  		+'</div>'
					  		+'</div>'
					  	+'</section>';
    	});
    	 $("#resText").after(htmlStr);
    }
    
    
    
    
  function buy(sellid){
  
  }
 
 function tabFunc(div,klass){
 	div.click(function(){
 		div.removeClass(klass);
 		$(this).addClass(klass);
 		keywordVal="";
 		curpageVal = 1;
        $("#listContainer").html('<div id="resText"></div><!--resText-->');
     	 htmlStr = "";
         getData();
 		
 	});
 }
 
  	/**
     * 搜索
     */
    function search() {
        keywordVal = $.trim($("#teamSearch").val());
       $("#listContainer").html('<div id="resText"></div><!--resText-->');
	        curpageVal = 1;
	       	 htmlStr = "";
         	getData();
    }
</script>

</body>
</html>
